<!-- 实时流量 -->
<template>
  <div class="dashboard-editor-container">
    <el-tabs type="border-card" v-model="labelName" @tab-click="onTabClick" style="overflow-x: auto;">
      <el-tab-pane label="拓扑看板" name="拓扑看板">
        <vue2-org-tree :data="tableData2" :renderContent="renderContent" :horizontal="true" @on-expand="onExpand"
          @on-node-click="NodeClick" collapsable style="width:100%;">
        </vue2-org-tree>
      </el-tab-pane>
      <el-tab-pane label="列表看板" name="列表看板">
        <div style="display:flex;justify-content:space-between;">
          <partitionTree :nodeData="nodeData" :expandArray="expandArray" :addTemplate="false" :defaultExpandAll="false"
            minHeight="calc(100vh - 145px)" @handleNodeClick="handleNodeClick" ref="partitionTree"
            @toggleVisibility="toggleVisibility">
          </partitionTree>
          <div :style="{ width: containerWidth }" class="box"
            style="background:#fff;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);">
            <el-row style="background: #fff; padding: 16px 16px 0;">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="padding-right: 8px;margin: 0px 0 32px;">
                <div class="terminal">
                  <el-tag effect="dark" @click="terminalClick('')">全部终端：{{ allStatus }}</el-tag>
                  <el-tag type="success" effect="dark" @click="terminalClick(1)">在线终端：{{ onStatus }}</el-tag>
                  <el-tag type="info" effect="dark" @click="terminalClick(2)">离线终端：{{ offStatus }}</el-tag>
                </div>
                <el-table border stripe style="width: 100%;z-index:1000; margin-top: 15px" :data="tableData">
                  <el-table-column label="序号" width="80" type="index"
                    :index='(index) => { return (index + 1) + (pageNum - 1) * pageSize }'> </el-table-column>
                  <el-table-column label="部门" prop="DepartmentID" width="120" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      <span>{{ getDepartName(row.DepartmentID) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="资产名称" prop="DeviceName" width="160" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-show="scope.row.DeviceName === undefined"></span>
                      <span v-show="scope.row.DeviceName !== undefined">{{ scope.row.DeviceName || '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="使用者" prop="UserName" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-show="scope.row.UserName === undefined"></span>
                      <span v-show="scope.row.UserName !== undefined">{{ scope.row.UserName || '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="安装代理" prop="RealnameType" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-show="scope.row.RealnameType === 1">安装代理</span>
                      <span v-show="scope.row.RealnameType === 2">扫描识别</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作系统" prop="OsInfo" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-show="scope.row.OsInfo === undefined"></span>
                      <span v-show="scope.row.OsInfo !== undefined">{{ scope.row.OsInfo || '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="联系电话" prop="Phone" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-show="scope.row.Phone === undefined"></span>
                      <span v-show="scope.row.Phone !== undefined">{{ scope.row.Phone || '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="在线状态" prop="Status" show-overflow-tooltip width="80">
                    <template slot-scope="scope">
                      <span v-show="scope.row.Status === undefined"></span>
                      <span v-show="scope.row.Status !== undefined"
                        :style="{ color: scope.row.Status === 1 ? '#67C23A' : '#F56C6C' }">{{ scope.row.Status === 1 ?
                          '在线' :
                          '离线' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="运行时长" prop="KeepRunningTime" width="120">
                    <template slot-scope="scope">
                      <span v-show="scope.row.KeepRunningTime === undefined"></span>
                      <span v-show="scope.row.KeepRunningTime !== undefined">{{ (scope.row.KeepRunningTime &&
                        scope.row.Status
                        === 1) ? formatDuration(scope.row.KeepRunningTime) : '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="工作状态" prop="WorkStatus" show-overflow-tooltip width="80">
                    <template slot-scope="{row}">
                      <span>{{ formatWorkStatus(row) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="活跃进程" prop="ActiveProc" show-overflow-tooltip></el-table-column>
                  <el-table-column label="终端地址" prop="DeviceIP" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-show="scope.row.DeviceIP === undefined"></span>
                      <span v-show="scope.row.DeviceIP !== undefined">{{ scope.row.DeviceIP || '--' }}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="版本号" prop="Version" width="140" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-show="scope.row.Version === undefined"></span>
                      <span v-show="scope.row.Version !== undefined">{{ scope.row.Version || '--' }}</span>
                    </template>
                  </el-table-column> -->
                  <el-table-column label="计算机名称" width="180" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-show="scope.row.ComputerName === undefined"></span>
                      <span v-show="scope.row.ComputerName !== undefined">{{ scope.row.ComputerName || '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="CPU使用率" width="120" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      <span>{{ row.Status === 1 ? row.CPUUsedPert + '%' : '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="内存使用率" width="120" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      <span> {{ (row.Memeory_Used === 0 || !row.Memeory_Total) ? '--' : ((row.Memeory_Used /
                        row.Memeory_Total) * 100).toFixed(1) + '%' }} </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="登录账号" width="80" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-show="scope.row.Account === undefined"></span>
                      <span v-show="scope.row.Account !== undefined">{{ scope.row.Account || '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="100" show-overflow-tooltip fixed="right">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="LookDetails(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page=pageNum
                  :page-size=pageSize background layout="total, prev, pager, sizes, next, jumper" :total="total">
                </el-pagination>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- <el-dialog v-el-drag-dialog title="设备详情" :close-on-click-modal="false" :visible.sync="dialogTableVisible" width="70%">
      <div>
        <el-row>
          <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item>
              <template slot="label">
                从属部门
              </template>
              {{ getDepartName(dialogForm.DepartmentID) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                终端用户
              </template>
              {{ dialogForm.Name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系电话
              </template>
              {{ dialogForm.Phone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                在线状态
              </template>
              <span :style="{ color: dialogForm.Status === 1 ? '#67C23A' : '#F56C6C' }">{{ dialogForm.Status === 1 ? '在线'
                :
                '离线' }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                在线时长
              </template>
              {{ dialogForm.LoginTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                终端地址
              </template>
              {{ dialogForm.DeviceIP }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                版本号
              </template>
              {{ dialogForm.Version }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                操作系统
              </template>
              {{ dialogForm.OsInfo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                计算机名称
              </template>
              {{ dialogForm.ComputerName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                QQ状态
              </template>
              {{ dialogForm.QQ_Status }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                状态解释
              </template>
              {{ dialogForm.QQ_reason }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                QQ版本
              </template>
              {{ dialogForm.QQ_Version }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                微信状态
              </template>
              {{ dialogForm.WX_Status }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                状态解释
              </template>
              {{ dialogForm.WX_reason }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                微信版本
              </template>
              {{ dialogForm.WX_Version }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                开通业务
              </template>
              {{ dialogForm.RightDC === 1 ? '行为分析,' : '' }}
              {{ dialogForm.RightAMazon === 1 ? '亚马逊助手,' : '' }}
              {{ dialogForm.RightAI === 1 ? 'AI助手,' : '' }}
              {{ dialogForm.RightV2ray === 1 ? '网络加速,' : '' }}
              {{ dialogForm.RightData === 1 ? '精准资源' : '' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTableVisible = false;">关 闭</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import Vue2OrgTree from "vue2-org-tree";
import 'vue2-org-tree/dist/style.css'
import { connrequest } from "@/api/firstPage.js"
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import linechart from "./components/linechart.vue";
import conntable from "./components/conntable.vue";
import { formatDuration, getDeviceTreeData, convertListToNames, getuuid, toTree, parseTime } from "@/utils/index.js";
import partitionTree from "@/components/partitionTree";
export default {
  name: 'terminalState',
  components: { linechart, conntable, Vue2OrgTree, partitionTree },
  directives: { elDragDialog },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      size: '',
      labelName: '拓扑看板',
      CS: {
        'min-width': '200px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      LS: {
        'text-align': 'center',
        'height': '10%',
        'min-width': '150',
        'word-break': 'keep-all'
      },
      dialogTableVisible: false,
      departmentStats: [],
      dialogForm: {},
      onStatus: 0,
      offStatus: 0,
      allStatus: 0,
      WorkingCount: 0,
      PlayingCount: 0,
      OtherStatusCount: 0,
      LeavingCount: 0,
      Name: '',
      Status: '',
      time: 30000,
      tableData: [],
      tableData1: [],
      tableData2: {},
      nodeData: [],
      expandArray: [],
      containerWidth: 'calc(100% - 275px)',
      lineChartData: {
        time: [],
        expectedData: [],
        actualData: []
      },
      rowIndex: '',
      DepartmentList: [],
      RootName: [],
      firstActivation: true
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.pageSize = Cookies.get('Public_DefaultPageLength') * 1
    this.getData()
    this.GetDictArea()
    this.GetDepartmentDeviceSumTree()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.initData()
    if (this._isMounted) {
      this.onActivated(); // 首次加载时调用
    }
  },
  activated() {
    this.onActivated()
  },
  methods: {
    parseTime,
    formatDuration,
    // 组件激活
    onActivated() {
      if (!this.$route.meta.fromMeta?.isDetail) {
        this.pageSize = Cookies.get('Public_DefaultPageLength') * 1
        this.onTabClick({ label: '拓扑看板' })
        this.GetDictArea()
        this.initData()
        this.choseArea = {}
        this.Status = ''
        this.firstActivation = false
      }
    },
    // 状态格式化方法
    formatWorkStatus(row) {
      const map = {
        1: '工作',
        2: '娱乐',
        3: '锁定',
        4: '屏保',
        5: '离线',
        10: '其他'
      }
      return map[row.WorkStatus] || '未知状态' // 处理未定义状态码
    },
    getDepartName(val) {
      const arr = convertListToNames([val], this.DepartmentList, 'ID', 'Name')
      return arr.join(',') || this.RootName
    },
    async initData(searchobj = {}) {
      const res = await connrequest('GetDepartmentDeviceSumTree')
      res.Data.Name = res.Data.RootName
      let arr = toTree(res.Data.Department, res.Data.RootName)
      this.expandArray = [arr?.[0]?.Name]
      this.nodeData = arr
      this.WorkingCount = res.Data.WorkingCount
      this.PlayingCount = res.Data.PlayingCount
      this.OtherStatusCount = res.Data.OtherStatusCount
      this.LeavingCount = res.Data.LeavingCount
      this.onStatus = res.Data.OnlineCount
      this.offStatus = res.Data.OffLineCount
      this.allStatus = this.onStatus + this.offStatus
    },
    onTabClick(row) {
      this.labelName = row.label
      this.getData();
      this.GetDepartmentDeviceSumTree()
    },
    handleNodeClick(nodeData) {
      this.choseArea = { DepartmentID: nodeData.data.ID }
      this.GetDictArea(this.choseArea)
    },
    async GetDictArea(obj = {}) {
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          ...obj
        }
      }
      const res = await connrequest('GetDevice', data)
      this.tableData = res.Data
      this.total = res.Paging.TotalCount
      if (!obj.Status) {
        const res = await connrequest('GetDepartmentDeviceSumTree');
        const match = res.Data.Department.find(item => item.ID === obj.DepartmentID);
        const online = match ? match.OnlineCount : res.Data.OnlineCount;
        const offline = match ? match.OffLineCount : res.Data.OffLineCount;
        this.onStatus = online;
        this.offStatus = offline;
        this.allStatus = online + offline;
      }
    },
    toggleVisibility(isHidden) {
      if (isHidden)
        this.containerWidth = '100%';
      else
        this.containerWidth = 'calc(100% - 275px)';
    },
    // 获取部门树
    async GetDepartmentDeviceSumTree() {
      const res = await connrequest('GetDepartmentDeviceSumTree')
      this.DepartmentList = res.Data.Department
      this.RootName = res.Data.RootName
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, "expand", item.DeviceName);
          if (item.children) {
            _this.toggleExpand(item.children, item.DeviceName);
          }
        });
      } else {
        this.$set(data, "expand", data.children.length < 10);
        if (data.children) {
          _this.toggleExpand(data.children, data.children.length < 10);
        }
      }
    },
    collapse(list) {
      var _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    NodeClick(e, data) {
      if (data.DeviceUUID) {
        this.LookDetails(data)
      }
    },
    LookDetails(row) {
      this.activeTab = 'tab1'
      this.dialogForm = { ...row }
      // this.$router.push({ path: '/realTimeTraffic/assetDetails', query: { Moder: this.dialogForm } });
      this.$router.push({ path: '/realTimeTraffic/assetDetails' });
      sessionStorage.setItem('detailStatus', JSON.stringify(this.dialogForm))
      return
      const QQarr = ['QQ未安装', 'QQ未运行', '注入QQ成功', '注入QQ失败', '策略配置不需要注入', '状态查询未完成']
      const WXarr = ['WX未安装', 'WX未运行', '注入WX成功', '注入WX失败', '策略配置不需要注入', '状态查询未完成']
      this.dialogTableVisible = true
      this.dialogForm = {
        ...row,
        QQ_reason: QQarr[row.QQ_Status],
        WX_reason: WXarr[row.WX_Status],
        QQ_Status: (row.QQ_Status === 3) ? '异常' : '正常', //row.QQ_Status === 1 || 
        WX_Status: (row.WX_Status === 3) ? '异常' : '正常'  //row.WX_Status === 1 || 
      }
    },
    rowStyle({ row, rowIndex }) {
      if (this.rowIndex === rowIndex) {
        return {
          'background-color': '#ffeecf !important'
        }
      }
    },
    rowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    async getData(status = 2) {
      const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 100000
        },
        Filter: {
          OrderBy: "Status"
        }
      }
      const res = await connrequest('GetDevice', data)
      res.Data = res.Data || []

      if (status === 1) {
        res.Data = res.Data.filter(item => item.Status === status)
      }
      if (status === 0) {
        res.Data = res.Data.filter(item => item.Status !== 1)
      }
      // 把终端根据在线状态和在线时长进行排序
      let arr = [...res.Data]
      // 定义排序比较函数
      function compare(a, b) {
        // 首先根据Status从大到小排序
        if (a.Status === 1 && b.Status !== 1) {
          return -1;
        } else if (a.Status !== 1 && b.Status === 1) {
          return 1;
        } else {
          // 如果Status相同，根据CreateTime从大到小排序
          if (a.CreateTime > b.CreateTime) {
            return -1;
          } else if (a.CreateTime < b.CreateTime) {
            return 1;
          } else {
            return 0;
          }
        }
      }
      arr.sort(compare);
      let sortarr = await getDeviceTreeData('children')
      this.tableData2 = { Department: '测试', children: sortarr, AgentName: '测试' }
      this.toggleExpand(this.tableData2, true)
      this.departmentStats = res.Data
    },
    renderContent(h, data) {
      if (!data.DeviceUUID) {
        return h('div', {
          style: { width: '350px', height: '120px', display: 'flex', padding: '0', border: '1px solid #2491fc' }
        }, [
          h('div', {
            style: {
              width: '28px', background: '#2491fc', color: '#fff', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center',
              writingMode: 'vertical-rl',
              textOrientation: 'upright',
              whiteSpace: 'nowrap',
              letterSpacing: this.getDepartName(data.ID).length > 5 ? '0px' : '5px',
              paddingRight: '3px'
            }
          }, [h('p', this.getDepartName(data.ID))]),
          h('div', {
            style: { display: 'flex', flexDirection: 'column', justifyContent: 'center' }
          }, [
            h('div', {
              style: { display: 'flex', alignItems: 'center', paddingLeft: '20px' }
            }, [
              h('span', { style: { fontSize: '14px', lineHeight: '20px', color: '#23ce69', width: '120px', textAlign: 'left' } }, `在线：${data.AgentName ? this.onStatus : data.OnlineCount}人`),
              h('span', { style: { fontSize: '14px', lineHeight: '20px', color: '#f36b6e' } }, `离线：${data.AgentName ? this.offStatus : data.OffLineCount}人`)
            ]),
            h('div', { style: { display: 'flex', paddingLeft: '20px' } }, [
              h('span', { style: { fontSize: '14px', lineHeight: '20px', color: '#23ce69', width: '120px', textAlign: 'left' } }, `工作：${data.AgentName ? this.WorkingCount : data.WorkingCount}人`),
              h('span', {
                style: { fontSize: '14px', lineHeight: '20px', color: '#f36b6e' }
              }, `娱乐：${data.AgentName ? this.PlayingCount : data.PlayingCount}人`)
            ]),
            h('div', {
              style: { display: 'flex', paddingLeft: '20px', }
            }, [
              h('span', {
                style: { fontSize: '14px', lineHeight: '20px', color: '#23ce69', width: '120px', textAlign: 'left' }
              }, `其他：${data.AgentName ? this.OtherStatusCount : data.OtherStatusCount}人`),
              h('span', {
                style: { fontSize: '14px', lineHeight: '20px', color: '#f36b6e' }
              }, `离开：${data.AgentName ? this.LeavingCount : data.LeavingCount}人`)
            ]),
            !data.AgentName && h('div', { style: { fontSize: '14px', lineHeight: '20px', color: '#bbb', paddingLeft: '20px', textAlign: 'left' } }, `经理：${data.Manager}（${data.Phone}）`)
          ])
        ]);
      }

      const isOnline = data.Status === 1;
      const RealnameType = data.RealnameType === 1
      return h('div', {
        style: { width: '350px', height: '140px', display: 'flex', padding: '0', border: `1px solid ${isOnline ? '#23ce69' : '#939ca5'}`, cursor: 'pointer', position: 'relative' }
      }, [
        h('div', {
          style: {
            width: '28px', background: isOnline ? '#23ce69' : '#939ca5', color: '#fff', textAlign: 'center', lineHeight: '23px', display: 'flex', alignItems: 'center', justifyContent: 'center',
            writingMode: 'vertical-rl',
            textOrientation: 'upright',
            whiteSpace: 'nowrap',
            overflow: 'hidden'
          }
        }, [h('p', `${data.UserName ? data.UserName : '-'}`)]),
        h('div', { style: { display: 'flex', flex: 1 } }, [
          h('div', [h('img', { attrs: { src: data.FileUUID ? `/ProfilePhoto/${data.FileUUID}` : require('../../assets/logo@2x.png') }, style: { width: '60px', height: '60px', marginTop: '35px', marginLeft: '10px', borderRadius: '50%', objectFit: 'cover', opacity: isOnline ? 'none' : '0.5' } })]),
          h('div', [
            h('div', { style: { fontSize: '14px', lineHeight: '20px', color: isOnline ? '#23ce69' : '#939ca5', fontWeight: '600', paddingLeft: '20px', paddingTop: '10px', textAlign: 'left', width: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, `${data.DeviceName ? data.DeviceName : '-'}`),
            h('div', { style: { fontSize: '14px', lineHeight: '20px', color: '#bbb', paddingLeft: '20px', textAlign: 'left', width: '250px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, `终端地址：${data.DeviceIP}`),
            h('div', { style: { fontSize: '14px', lineHeight: '20px', color: '#bbb', paddingLeft: '20px', textAlign: 'left', width: '250px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, `${isOnline ? '开机时长' : '离线时长'}：${formatDuration(Date.now() / 1000 - data.CreateTime)}`),
            h('div', { style: { fontSize: '14px', lineHeight: '20px', color: '#bbb', paddingLeft: '20px', textAlign: 'left', width: '250px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, `工作状态：${this.formatWorkStatus({ WorkStatus: data.WorkStatus })}`),
            h('div', { style: { fontSize: '14px', lineHeight: '20px', color: '#bbb', paddingLeft: '20px', textAlign: 'left', width: '250px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, `活跃进程：${data.ActiveProc || '-'}`),
            h('div', { style: { fontSize: '14px', lineHeight: '20px', color: '#bbb', paddingLeft: '20px', textAlign: 'left', width: '250px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, `联系电话：${data.Phone || '-'}`),
          ]),
          h('div', { style: { fontSize: '20px', lineHeight: '20px', color: '#000', textAlign: 'center', position: 'absolute', right: '10px', top: '0px' }, attrs: { title: '详情' }, on: { click: () => this.LookDetails(data) } }, '...'),
          !RealnameType && h('div', { style: { fontSize: '20px', lineHeight: '20px', width: '20px', background: 'red', borderRadius: '50%', color: '#fff', marginTop: '10px', textAlign: 'center', position: 'absolute', right: '10px', bottom: '10px' }, attrs: { title: '没有安装代理' } }, '!')
        ])
      ]);
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.GetDictArea({ ...this.choseArea, Status: this.Status })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.GetDictArea({ ...this.choseArea, Status: this.Status })
    },
    terminalClick(status) {
      this.GetDictArea({ Status: status, ...this.choseArea })
    },
    transformData(data) {
      const departments = {};
      for (const item of data) {
        const departmentName = item.DepartmentID;
        if (!departments[departmentName]) {
          departments[departmentName] = { Department: departmentName, children: [] };
        }
        departments[departmentName].children.push(item);
      }
      Object.values(departments).forEach(item => {
        item.ID = item.ID || getuuid();
      });
      return Object.values(departments);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.terminal {
  margin: 10px 0px;

  .el-tag {
    cursor: pointer;
    margin-right: 10px;
  }
}

::v-deep .el-tabs__content {
  overflow: auto;
}
</style>
<style>
.org-tree-node-label .org-tree-node-label-inner {
  padding: 0px;

}
</style>